<template>
  <div id="app">
    <!-- 头部区域 -->
    <header class="header">
      <h1>益齿口腔在线预约系统</h1>
    </header>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 提示区域 -->
      <div class="notice">
        本系统仅限预约当天诊疗号
      </div>

      <!-- 查询区域 -->
      <div class="search-container">
        <input type="text" class="search-input" placeholder="请输入您的手机号" v-model="queryInfo.phone">
<!--               @input="validatePhone" @blur="handleBlur"-->

        <button class="search-button"
            @click="handleSubmit"
            :disabled="isSubmitting"
            :class="{ 'disabled': isSubmitting }"
        >
          {{ isSubmitting ? '提交中...' : '提交' }}
        </button>
<!--        <button class="search-button" @click="getHotelByPhone">预约挂号</button>-->

      </div>
      <span class="error-message" v-if="showError" :style="{ visibility: showError ? 'visible' : 'hidden' }">手机号输入不合法</span>

      <!-- 号码显示区域 -->
      <div class="number-display">
        <div class="number-item">
          <span class="number-label">当前正在进行的号码：</span>
          <span class="number-value">{{ currentNumber }}</span>
        </div>
        <div class="number-item">
          <span class="number-label">您的预约号码：</span>
          <span class="number-value your-number">{{ yourNumber }}</span>
        </div>
      </div>

      <!-- 时间显示区域 -->
      <div class="time-display">
        <div class="current-time">{{ currentTime }}</div>
        <div class="current-week">{{ currentWeek }}</div>
      </div>
    </div>

    <!-- 版权信息 -->
    <footer class="footer">
      © 2023 益齿口腔医院 版权所有
    </footer>
  </div>
</template>

<script>


export default {
  data() {
    return {
      queryInfo: {
        phone: '',// 当前的页数
        pagenum: 1,        // 当前每页显示多少条数据
        pagesize: 10
      },
      rusultid:1,
      currentNumber: 1,
      yourNumber: '',
      currentTime: '',
      currentWeek: '',
      showError: false,
      isTouched:false,
      isSubmitting: false // 默认情况下，按钮可用

    }
  },
  created() {
    this.updateTime();
    setInterval(this.updateTime, 1000);
    // setInterval(this.getMaxStatId(), 1000);
    this.getMaxStatId();
    setInterval(() => { this.getMaxStatId(); }, 100000);

  },
  methods:{
    async handleSubmit() {
      if (this.queryInfo.phone.length!=11) {
        this.$message.error("您输入的手机号不合法，请重新输入")
        return;
      }
      if (this.isSubmitting) return;

      this.isSubmitting = true;

      try {
        const {data:res}=await this.$http.get('/queryByphone',{
          params:{phone:this.queryInfo.phone}
        })
        if (res.meta!=200){
          this.$message.error("预约失败，请稍后重试")
          return
        }
        console.log('-----------------')
        console.log(JSON.stringify(res))
        if (res.id!=null){
          this.$message.success('您今天已经预约过了！不用重复预约')
          this.yourNumber=res.id;
        }else{
          this.insertPhone()

        }
        // 提交成功后的处理
      } catch (error) {
        console.error('提交失败:', error);
      } finally {
        this.isSubmitting = false;
      }

    },

    // 验证手机号逻辑
    validatePhone() {
      // 更精确的手机号验证正则
      const phoneRegex = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
      return !this.queryInfo.phone || phoneRegex.test(this.queryInfo.phone)
    },
    // 输入时处理
    handleInput() {
      this.isTouched = true
      // 实时验证但只在有错误时显示
      if (!this.validatePhone()) {
        this.showError = true
      } else {
        this.showError = false
      }
    },



    async getMaxStatId() {
      const {data: res} = await this.$http.get('/queryMaxStatId', {
        // params: {phone: this.queryInfo.phone}
      })
      console.log("getMaxStatId-"+res.maxStatId)
      this.currentNumber=res.maxStatId;
    },


// async getHotelByPhone(){
//     const {data:res}=await this.$http.get('/queryByphone',{
//       params:{phone:this.queryInfo.phone}
//     })
//     console.log('-----------------')
//     console.log(JSON.stringify(res))
//     if (res.id!=null){
//       this.$message.success('您今天已经预约过了！不用重复预约')
//       this.yourNumber=res.id;
//     }else{
//       this.insertPhone()
//       setTimeout(() =>
//       this.getHotelByPhone_bak()
//           , 3000)
//       // this.getHotelByPhone_bak()
//     }
//     },
    async insertPhone(){
     const {data:res}=await this.$http.get('/insertPhone',{
       params:{phone:this.queryInfo.phone}
     })
      console.log("res"+res)
      if (res.meta==200){
        this.$message.success('预约成功')
        this.yourNumber=res.returnid
      }
      else {
        this.$message.error('预约失败')
      }

    },
updateTime() {
  const now = new Date();
  const year = now.getFullYear();
  const month = (now.getMonth() + 1).toString().padStart(2, '0');
  const day = now.getDate().toString().padStart(2, '0');
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');

  this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  this.currentWeek = weekDays[now.getDay()];
}
  },


}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

html, body {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 头部样式 */
.header {
  background-color: #1e88e5;
  color: white;
  padding: 0px 0;
  text-align: center;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header h1 {
  font-size: 1.5rem;
  font-weight: normal;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px;
}

/* 提示区域样式 */
.notice {
  color: #f44336;
  padding: 10px 15px;
  text-align: center;
  font-size: 1rem;
  background-color: #ffebee;
  margin: 10px auto;
  border-radius: 4px;
  max-width: 90%;
}

/* 查询区域样式 */
.search-container {
  display: flex;
  padding: 15px;
  max-width: 600px;
  margin: 20px auto;
  width: 90%;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
  outline: none;
}

.search-button {
  padding: 10px 20px;
  background-color: #1e88e5;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #1565c0;
}

/* 号码显示区域 */
.number-display {
  background-color: white;
  padding: 20px;
  margin: 15px auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 90%;
}

.number-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
}

.number-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.number-label {
  font-size: 1rem;
  color: #666;
}

.number-value {
  font-size: 1.8rem;
  font-weight: bold;
  color: #1e88e5;
}

.your-number {
  color: #f44336;
}

/* 时间显示区域 */
.time-display {
  background-color: white;
  padding: 15px;
  margin: 15px auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 90%;
  text-align: center;
}

.current-time {
  font-size: 1.2rem;
  color: #333;
}

.current-week {
  font-size: 1rem;
  color: #666;
  margin-top: 5px;
}

/* 版权信息 */
.footer {
  text-align: center;
  padding: 15px;
  color: #999;
  font-size: 0.9rem;
  //background-color: white;
  //box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
}

/* 响应式设计 */
@media (min-width: 768px) {
  .header h1 {
    font-size: 2rem;
  }

  .notice {
    font-size: 1.2rem;
    max-width: 80%;
  }

  .search-container {
    padding: 20px;
  }

  .number-label {
    font-size: 1.1rem;
  }

  .number-value {
    font-size: 2.2rem;
  }

  .current-time {
    font-size: 1.5rem;
  }

  .current-week {
    font-size: 1.2rem;
  }
}

@media (min-width: 1024px) {
  .header h1 {
    font-size: 2.5rem;
  }

  .notice {
    max-width: 70%;
  }

  .number-display {
    padding: 25px 30px;
  }

  .number-label {
    font-size: 1.2rem;
  }

  .number-value {
    font-size: 2.5rem;
  }

  .time-display {
    padding: 20px;
  }

  .current-time {
    font-size: 1.8rem;
  }

  .current-week {
    font-size: 1.4rem;
  }
}

.error-message {
  color: #f44336;
  font-size: 16px;
  margin-left: 10px;
  white-space: nowrap;
}
.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
</style>